<template>
  <div id="app" class="building">
    <div class="backgroud-box">
      <!-- 公开/私有切换 -->
      <div class="button-area">
        <el-button
          type="text"
          class="public-button"
          :style="
            fileAttribute == 0
              ? ''
              : 'border-bottom: 3px solid rgb(119, 216, 119);'
          "
          @click="fileAttribute = 1"
          >公开文档</el-button
        >
        <span
          style="
            height: 35px;
            position: absolute;
            border: 1px solid rgb(168, 168, 168);
            margin: 15px 50px;
          "
        ></span>
        <el-button
          type="text"
          class="private-button"
          :style="fileAttribute == 0 ? 'border-bottom: 3px solid orange;' : ''"
          @click="fileAttribute = 0"
          >私有文档</el-button
        >
      </div>
      <!-- 文件拖拽区 -->
      <div class="content">
        <div class="drag-area" @dragover="fileDragover" @drop="fileDrop">
          <div class="uploader-tips">
            <span>请将需要上传的文件拖拽至虚线框中，或</span>
            <label for="fileInput" style="color: #11a8ff; cursor: pointer"
              >点此上传</label
            >
            <!-- 点此上传 -->
            <input
              type="file"
              id="fileInput"
              multiple
              @change="chooseUploadFile"
              style="display: none"
            />
          </div>
          <div style="margin-top: 20px; color: gray">
            支持格式：
            <img
              src="@/assets/image/upload/ppt.png"
              style="height: 30px; width: 30px"
              alt=""
            /><img
              src="@/assets/image/upload/xls.png"
              style="height: 30px; width: 30px"
              alt=""
            /><img
              src="@/assets/image/upload/doc.png"
              style="height: 30px; width: 30px"
              alt=""
            /><img
              src="@/assets/image/upload/pdf.png"
              style="height: 30px; width: 30px"
              alt=""
            /><img
              src="@/assets/image/upload/txt.png"
              style="height: 30px; width: 30px"
              alt=""
            /><img
              src="@/assets/image/upload/zip.png"
              style="height: 30px; width: 30px"
              alt=""
            /><img
              src="@/assets/image/upload/etc.png"
              style="height: 30px; width: 30px"
              alt=""
            />
          </div>
          <el-button
            @click="selectDialog"
            type="primary"
            style="margin-top: 20px"
            ><i class="el-icon-upload el-icon--right"></i>点击上传</el-button
          >
          <div v-if="fileName[0]" style="margin-top: 20px">
            目前待点击上传的文件:
          </div>
          <div
            v-if="fileName[0]"
            :class="[
              fileName.length > 5
                ? 'normal-container_warp'
                : 'normal-container',
            ]"
          >
            <div
              v-for="(item, index) in fileName"
              :key="index"
              style="height: 80px; width: 60px; margin-right: 10px; margin: 0"
            >
              <div style="height: 60px; width: 60px; margin: 0 auto">
                <img
                  :src="
                    require('@/assets/image/upload/' +
                      matchType(batchFile[index].name) +
                      '.png')
                  "
                  alt=""
                  style="width: 60px; height: 60px"
                />
              </div>
              <div style="text-align: center; overflow: hidden">
                <span style="font-size: 12px">{{ item }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 私有文档对话框 -->
      <el-dialog
        title=""
        class="my-dialog-css"
        :visible.sync="privateVisible"
        :modal-append-to-body="false"
      >
        <div style="height: 250px">
          <div
            style="float: left; width: 50px; height: 50px; margin-left: 20px"
          >
            <img
              src="@/assets/image/upload/warning.png"
              height="40px"
              width="40px"
              align="top"
              alt=""
            />
          </div>
          <div
            style="
              float: left;
              margin-left: 20px;
              margin-top: 10px;
              height: 50px;
            "
          >
            <b>请您确认您要上传的私有文档：</b>
          </div>
          <div
            v-if="fileName"
            style="
              overflow: auto;
              position: absolute;
              margin-top: 60px;
              margin-left: 80px;
              display: flex;
              width: 550px;
              height: 210px;
              flex-wrap: wrap;
            "
          >
            <div
              v-for="(item, index) in fileName"
              :key="index"
              style="height: 80px; width: 60px; margin-right: 10px"
            >
              <div style="height: 60px; width: 60px; margin: 0 auto">
                <img
                  :src="
                    require('@/assets/image/upload/' +
                      matchType(batchFile[index].name) +
                      '.png')
                  "
                  alt=""
                  style="width: 60px; height: 60px"
                />
              </div>
              <div style="text-align: center; overflow: hidden">
                <span>{{ item }}</span>
              </div>
            </div>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="uploadOk" class="confirm-button"
            >确 定</el-button
          >
          <el-button
            type="warning"
            @click="privateVisible = false"
            class="cancel-button"
            >取 消</el-button
          >
        </span>
      </el-dialog>
      <!-- 公开文档对话框 -->
      <el-dialog
        :visible.sync="publicVisible"
        class="my-dialog-css"
        :modal-append-to-body="false"
      >
        <!-- 左侧简介 -->
        <div class="left">
          <div style="float: left; width: 50px; margin-left: 20px">
            <img
              src="@/assets/image/upload/warning.png"
              height="40px"
              width="40px"
              align="top"
              alt=""
            />
          </div>
          <div>
            <b>请您根据上传文档的敏感度，设置其可见性;</b><br />
            <span style="float: left; margin-left: 5px"
              ><b>目前待上传文档为： </b></span
            >
            <div
              v-if="fileName"
              style="
                margin-top: 40px;
                margin-left: 70px;
                display: flex;
                width: 280px;
                height: 150px;
                flex-wrap: wrap;
                overflow: auto;
              "
            >
              <div
                v-for="(item, index) in fileName"
                :key="index"
                style="height: 80px; width: 60px; margin-right: 10px"
              >
                <div style="height: 60px; width: 60px; margin: 0 auto">
                  <img
                    :src="
                      require('@/assets/image/upload/' +
                        matchType(batchFile[index].name) +
                        '.png')
                    "
                    alt=""
                    style="width: 60px; height: 60px"
                  />
                </div>
                <div style="text-align: center; overflow: hidden">
                  <span>{{ item }}</span>
                </div>
              </div>
            </div>
          </div>
          <div class="introduction">
            <div style="float: left; height: 20px; width: auto">
              <img
                src="@/assets/image/upload/introduction-tip.png"
                align="left"
                alt=""
              />
            </div>
            <span style="float: left; text-align: left; color: black"
              ><b>文档简介:</b></span
            >
            <el-input
              type="textarea"
              :rows="2"
              placeholder="请输入上传文档描述..."
              v-model="text"
            >
            </el-input>
          </div>
        </div>
        <!-- 中间单选 -->
        <div class="middle">
          <div style="position: absolute; margin-left: 120px; width: 120px">
            <el-radio-group v-model="radio">
              <el-radio :label="1" @change="noneCheckbox">所有人可见</el-radio
              ><br /><br /><br /><br /><br /><br />
              <el-radio :label="2" @change="firstCheckbox">仅部分可见</el-radio
              ><br /><br /><br /><br /><br /><br />
              <el-radio :label="3" @change="secondCheckbox">谁不可见</el-radio>
            </el-radio-group>
          </div>
        </div>
        <!-- 右侧多选 -->
        <div class="right">
          <div id="modal1" class="selectbox1">
            <el-checkbox-group
              class="checkbox-inline"
              v-model="dept"
              v-for="item in departmentArr"
              :key="item"
            >
              <el-checkbox :label="item" :key="item">{{ item }}</el-checkbox>
            </el-checkbox-group>
          </div>
          <div id="modal2" class="selectbox2">
            <el-checkbox-group
              class="checkbox-inline"
              v-model="noDept"
              v-for="item in departmentArr"
              :key="item"
            >
              <el-checkbox :label="item" :key="item">{{ item }}</el-checkbox>
            </el-checkbox-group>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button
            type="primary"
            class="confirm-button"
            @click="showSecondConfirmDialog"
            >确 定</el-button
          >
          <el-button
            type="warning"
            class="cancel-button"
            @click="publicVisible = false"
            >取 消</el-button
          >
        </span>
      </el-dialog>
    </div>
    <!-- 成功后跳转页 -->
    <el-dialog
      width="30%"
      :show-close="false"
      :visible.sync="jumpVisible"
      :modal-append-to-body="false"
    >
      <div class="success-jump">
        <p>
          <b>恭喜您成功上传文件，<br />您可以前往个人主页进行查看</b>
        </p>
        <el-button
          type="text"
          style="color: black; margin-top: 100px"
          @click="backJump"
          >知道了</el-button
        ><br />
        <el-button type="primary" style="width: 120px" @click="jumpToMyDoc"
          >现在去</el-button
        >
      </div>
    </el-dialog>
    <!-- 上传加载 -->
    <el-dialog
      :visible.sync="progressVisible"
      width="30%"
      :show-close="false"
      :modal-append-to-body="false"
      class="loading-dialog"
    >
      <section
        v-loading="loading"
        element-loading-text="拼命上传中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
      ></section>
    </el-dialog>
  </div>
</template>

<script>
import { getNameList, getCheckPassword } from "@/api/upload/upload";
export default {
  data() {
    return {
      loading: false,
      percent: 0,
      radio: 1,
      fileName: [],
      fileType: [],
      batchFile: [],
      fileAttribute: 1,
      text: "",
      departmentArr: [
        "xx1事业部",
        "xx2事业部",
        "xx3事业部",
        "xx4事业部",
        "xx5事业部",
        "数据测试",
      ],
      dept: [],
      noDept: [],
      userId: this.$store.getters.userId,
      password: "1",
      privateVisible: false,
      publicVisible: false,
      jumpVisible: false,
      progressVisible: false,
      MAX_FILE_SIZE: 100 * 1000 * 1000,
    };
  },
  created: function () {
    getNameList()
      .then((res) => {
        let value = res.code;
        if (value == 200) {
          this.departmentArr = res.data;
          console.log(res.msg);
        } else console.log("失败");
      })
      .catch((e) => {
        alert("获取部门列表失败");
        console.log(e);
      });
  },
  methods: {
    tip() {
      console.log(this.dept);
    },
    //判断文件类型
    matchType(fileName) {
      //后缀获取
      var suffix = "";
      //获取类型结果
      var result = "";
      try {
        var fileArr = fileName.split(".");
        suffix = fileArr[fileArr.length - 1];
      } catch (err) {
        suffix = "";
      }
      //匹配txt
      var txtlist = ["txt"];
      result = txtlist.some(function (item) {
        return item === suffix;
      });
      if (result) {
        result = "txt";
        return result;
      }
      //匹配doc
      var doclist = ["doc", "docx"];
      result = doclist.some(function (item) {
        return item === suffix;
      });
      if (result) {
        result = "doc";
        return result;
      }
      //匹配pdf
      var pdflist = ["pdf"];
      result = pdflist.some(function (item) {
        return item === suffix;
      });
      if (result) {
        result = "pdf";
        return result;
      }
      //匹配ppt
      var pptlist = ["ppt", "pptx"];
      result = pptlist.some(function (item) {
        return item === suffix;
      });
      if (result) {
        result = "ppt";
        return result;
      }
      //匹配xls
      var xlslist = ["xls", "xlsx"];
      result = xlslist.some(function (item) {
        return item === suffix;
      });
      if (result) {
        result = "xls";
        return result;
      }
      //匹配zip
      var ziplist = ["zip", "rar"];
      result = ziplist.some(function (item) {
        return item === suffix;
      });
      if (result) {
        result = "zip";
        return result;
      }
      return result;
    },
    //多选框显示
    noneCheckbox() {
      document.getElementById("modal1").style.display = "none";
      document.getElementById("modal2").style.display = "none";
      this.fileAttribute = 1;
    },
    firstCheckbox() {
      document.getElementById("modal1").style.display = "block";
      document.getElementById("modal2").style.display = "none";
      this.fileAttribute = 2;
    },
    secondCheckbox() {
      document.getElementById("modal1").style.display = "none";
      document.getElementById("modal2").style.display = "block";
      this.fileAttribute = 2;
    },
    //选择公开/私有对话框
    selectDialog() {
      if (this.batchFile.length == 0) {
        return alert("请选择要上传的文件");
      }
      if (this.fileAttribute == 0) {
        this.privateVisible = true;
      } else {
        this.publicVisible = true;
      }
    },
    //回跳初始状态
    backJump() {
      this.publicVisible = false;
      this.privateVisible = false;
      this.jumpVisible = false;
    },
    //跳转我的文档模块 +-+
    jumpToMyDoc() {
      this.$router.push("/mypageThree-one");
    },
    //二次确认
    async showSecondConfirmDialog() {
      const url = require("@/assets/image/upload/warn.png");
      if (this.radio == 1) {
        const confirmRes = await this.$confirm(
          "<img src=" +
            url +
            "><p>请您再次确认上传文件的类型为：<br>全部可见吗？</p>",
          "",
          {
            dangerouslyUseHTMLString: true,
            customClass: "messageBox_class",
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            cancelButtonClass: "btn-custom-cancel",
            confirmButtonClass: "btn-custom-confirm",
            center: true,
            showClose: false,
            type: "warning",
          }
        ).catch((err) => err); //用catch来捕获错误消息
        if ("confirm" === confirmRes) {
          //用户点击了确认
          this.uploadOk();
        }
      } else if (this.radio == 2) {
        const confirmRes = await this.$confirm(
          "<img src=" +
            url +
            `><p>请您再次确认上传文件的类型为：<br>仅<span style="color:red">${this.dept}</span>可见？</p>`,
          "",
          {
            dangerouslyUseHTMLString: true,
            customClass: "messageBox_class",
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            cancelButtonClass: "btn-custom-cancel",
            confirmButtonClass: "btn-custom-confirm",
            center: true,
            showClose: false,
            type: "warning",
          }
        ).catch((err) => err); //用catch来捕获错误消息
        if ("confirm" === confirmRes) {
          //用户点击了确认
          this.showThirdConfirmDialog();
        }
      } else {
        this.dept = [];
        this.departmentArr.forEach((a) => {
          let c = this.noDept.findIndex((b) => a === b);
          if (c > -1);
          else this.dept.push(a);
        });
        console.log(this.dept);
        const confirmRes = await this.$confirm(
          "<img src=" +
            url +
            `><p>请您再次确认上传文件的类型为：<br>仅<span style="color:red">${this.noDept}</span>不可见？</p>`,
          "",
          {
            dangerouslyUseHTMLString: true,
            customClass: "messageBox_class",
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            cancelButtonClass: "btn-custom-cancel",
            confirmButtonClass: "btn-custom-confirm",
            center: true,
            showClose: false,
            type: "warning",
          }
        ).catch((err) => err); //用catch来捕获错误消息
        if ("confirm" === confirmRes) {
          //用户点击了确认
          this.showThirdConfirmDialog();
        }
      }
    },
    //三次确认
    async showThirdConfirmDialog() {
      await this.$prompt(
        '<p style="font-size:20px;margin-top:30px"><b>请输入密码验证您的身份信息</b></p>',
        "",
        {
          dangerouslyUseHTMLString: true,
          customClass: "passwordMessageBox",
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          cancelButtonClass: "third-btn-custom-cancel",
          confirmButtonClass: "third-btn-custom-confirm",
          inputPlaceholder: "密码",
          center: true,
          showClose: false,
          inputValidator: (value) => {
            if (!value) {
              return "输入不能为空";
            }
          },
          inputErrorMessage: "输入不能为空",
          beforeClose: (action, instance, done) => {
            if (action === "confirm") {
              let value = instance.inputValue;
              //传递密码给后端进行验证判断
              let data = { userId: this.userId, inputPassword: value };
              console.log(data);
              getCheckPassword(data)
                .then((res) => {
                  console.log(res);
                  // 判断返回值
                  if (res.data === true) {
                    this.$message({
                      type: "success",
                      message: "身份校验成功 ",
                    });
                    this.uploadOk();
                  } else {
                    this.$message({
                      type: "error",
                      message: "密码错误",
                    });
                  }
                })
                .catch((err) => {
                  console.log(err);
                });
            }
            done();
          },
        }
      )
        .then(() => {})
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消输入",
          });
        });
    },
    // 点击上传
    chooseUploadFile(e) {
      this.batchFile = [];
      this.fileName = [];
      var files = e.target.files;
      var len = files.length;
      var i = 0;
      if (!files) return;
      while (i < len) {
        var suffix = "";
        var fileArr = files[i].name.split(".");
        suffix = fileArr[fileArr.length - 1];
        this.fileType[i] = suffix;
        switch (suffix) {
          case "doc":
          case "docx":
          case "xls":
          case "xlsx":
          case "pdf":
          case "ppt":
          case "pptx":
          case "txt":
          case "zip":
          case "rar":
            break;
          default:
            return alert("暂不支持该文件格式");
        }
        if (files[i].size > this.MAX_FILE_SIZE) {
          return alert("文件大小不能超过100M");
        }
        i++;
      }
      i = 0;
      while (i < len) {
        this.batchFile[i] = files[i];
        this.fileName[i] = files[i].name.replace(/(.*\/)*([^.]+).*/gi, "$2");
        i++;
      }
      console.log(files);
      console.log(this.batchFile);
      console.log(this.fileName);
      console.log(this.fileType);
      // 清空，防止上传后再上传没有反应
      e.target.value = "";
    },
    // 拖拽上传
    fileDragover(e) {
      e.preventDefault();
    },
    fileDrop(e) {
      e.preventDefault();
      this.fileName = [];
      this.fileType = [];
      this.batchFile = [];
      var files = e.dataTransfer.files; // 获取到上传的文件对象
      var len = files.length;
      var i = 0;
      console.log(files);
      console.log("拖拽释放鼠标时");
      if (!files) return;
      while (i < len) {
        var suffix = "";
        var fileArr = files[i].name.split(".");
        suffix = fileArr[fileArr.length - 1];
        this.fileType[i] = suffix;
        switch (suffix) {
          case "doc":
          case "docx":
          case "xls":
          case "xlsx":
          case "pdf":
          case "ppt":
          case "pptx":
          case "txt":
          case "zip":
          case "rar":
            break;
          default:
            return alert("暂不支持该文件格式");
        }
        if (files[i].size > this.MAX_FILE_SIZE) {
          return alert("文件大小不能超过100M");
        }
        i++;
      }
      i = 0;
      while (i < len) {
        this.batchFile[i] = files[i];
        this.fileName[i] = files[i].name.replace(/(.*\/)*([^.]+).*/gi, "$2");
        i++;
      }
      console.log(this.batchFile);
      console.log(this.fileName);
      console.log(this.fileType);
    },
    // 提交 +-+ ✔
    uploadOk() {
      this.progressVisible = true;
      this.loading = true;
      let data = new FormData();
      data.append("userId", this.userId);
      //data.append("uploadFile", this.batchFile);
      for (var i = 0; i < this.batchFile.length; i++) {
        data.append("uploadFile", this.batchFile[i]);
      }
      //data.append('fileName', this.fileName);
      //data.append('fileType', this.fileType);
      data.append("fileIntro", this.text);
      data.append("fileType", this.fileAttribute);
      data.append("deptNameList", this.dept);
      //xios
      var options = {
        // 设置axios的参数
        url: "http://localhost:8081/file/uploads",
        data: data,
        method: "post",
        headers: {
          "Content-Type": "multipart/form-data",
        },
        // onUploadProgress(progress) {
        //   console.log("调用成功");
        //   this.percent = Math.floor((progress.loaded / progress.total) * 100);
        // },
      };
      this.axios(options)
        .then((res) => {
          let value = res.data.code;
          if (value == 200) {
            this.progressVisible = false;
            this.loading = false;
            this.jumpVisible = true;
            // this.percent = 0;
          } else if (value == 500) {
            this.progressVisible = false;
            this.loading = false;
            this.$message({
              type: "error",
              message: res.data.msg,
            });
            for (var i = 0; i < res.data.data.length; i++) {
              if (res.data.data[i].code == 500) {
                this.$message({
                  type: "error",
                  message: res.data.data[i].msg,
                });
              }
            }
          }
        })
        .catch((e) => {
          this.progressVisible = false;
          this.loading = false;
          this.$message({
            type: "error",
            message: "上传失败",
          });
          //alert("上传失败");
          // this.percent = 0;
          console.log(e);
        }); // 发送请求
    },
  },
};
</script>
<style lang="less">
.el-checkbox-group {
  text-align: left;
}
.el-radio-group {
  text-align: left;
}
.selectbox2 {
  .el-checkbox__input {
    width: 18px;
    height: 18px;
  }
  .el-checkbox__input.is-checked .el-checkbox__inner,
  .el-checkbox__input.is-indeterminate .el-checkbox__inner {
    background: url(@/assets/image/upload/x.png) no-repeat center;
    border: 1px solid white;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 10px;
    background-size: 17px;
    vertical-align: middle;
    color: white;
  }
  .el-checkbox__input.is-checked .el-checkbox__inner::after {
    content: none;
  }
}
.loading-dialog {
  margin-top: 200px;
  .el-dialog {
    height: 120px;
    width: 200px !important;
    overflow: hidden;
    background-color: white;
  }
}
.my-dialog-css {
  .el-dialog {
    height: 420px;
    width: 750px;
    overflow: hidden;
  }
  .el-dialog__headerbtn {
    font-size: 40px;
    top: 0px;
  }
  .el-icon-close {
    color: white !important;
  }
  .el-dialog {
    border: 2px solid gray;
    border-radius: 9px;
  }
  .el-dialog__header {
    border-top-left-radius: 9px;
    border-top-right-radius: 9px;
    height: 45px;
    background: rgb(0, 178, 129);
    border-bottom: 2px solid gray;
    width: 100%;
    text-align: center;
    color: #666;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
  }
}
.passwordMessageBox {
  width: 700px;
  height: 400px;
  .el-message-box__input {
    width: 350px;
    margin: auto;
    margin-top: 30px;
  }
}
.third-btn-custom-cancel {
  float: right;
  margin-right: 200px;
  margin-top: 60px;
  width: 100px;
  height: 30px;
  line-height: 5px;
  background-color: orange;
  color: white;
}
.third-btn-custom-confirm {
  float: right;
  margin-right: 60px;
  margin-top: 60px;
  width: 100px;
  height: 30px;
  line-height: 5px;
}
.messageBox_class {
  width: 320px;
  height: 360px;
  border: 4px solid orange;
  background-color: whitesmoke;
  .el-message-box__header {
    height: 0;
  }
  .el-message-box__headerbtn .el-message-box__close {
    color: #3a3d46;
  }
  .el-message-box__status.el-icon-warning {
    display: none;
  }
  .el-message-box__status + .el-message-box__message {
    padding: 0;
    margin: 0;
  }
  .el-message-box__message p {
    text-align: center;
    color: black;
    margin-top: 30px;
  }
}
.btn-custom-cancel {
  float: right;
  margin-right: 20px;
  margin-top: 60px;
  width: 100px;
  height: 30px;
  line-height: 5px;
  background-color: orange;
  color: white;
}
.btn-custom-confirm {
  margin-right: 20px;
  margin-top: 60px;
  width: 100px;
  height: 30px;
  line-height: 5px;
}
</style>
<style lang="less" scoped>
* {
  font-size: 14px;
}
.normal-container {
  height: 80px;
  line-height: 20px;
  margin-top: 10px;
  flex-direction: row;
  justify-content: center;
  display: flex;
}
.normal-container_warp {
  height: 80px;
  line-height: 20px;
  margin-top: 10px;
  display: flex;
  justify-content: center;
  flex-direction: row;
  flex-wrap: wrap;
  overflow: auto;
}
.confirm-button {
  margin-right: 30px;
  width: 100px;
  height: 30px;
  line-height: 5px;
}
.cancel-button {
  margin-right: 40px;
  width: 100px;
  height: 30px;
  line-height: 5px;
}
.success-jump {
  width: auto;
  height: 300px;
  text-align: center;
}
.selectbox1 {
  border: 1px solid gray;
  display: none;
  width: 120px;
  height: 100px;
  margin-top: 60px;
  overflow: auto;
  padding-left: 10px;
}
.selectbox2 {
  border: 1px solid gray;
  display: none;
  width: 120px;
  height: 100px;
  margin-top: 150px;
  overflow: auto;
  padding-left: 10px;
}
.backgroud-box {
  margin-top: 100px;
  display: inline-block;
  overflow: hidden;
  text-align: center;
  height: 420px;
  width: 800px;
  border-radius: 6px;
  transition-duration: 0.9s;
  -webkit-transition-duration: 0.9s;
  background-color: white;
}
.drag-area {
  margin-top: 0px;
  display: inline-block;
  text-align: center;
  height: 320px;
  width: 700px;
  border: dashed 1px gray;
  margin-bottom: 10px;
  color: rgb(61, 60, 60);
}
.uploader-tips {
  text-align: center;
  height: 60px;
  line-height: 100px;
}
.button-area {
  float: left;
  margin-left: 250px;
}
.public-button {
  margin-top: 10px;
  height: 50px;
  width: 105px;
  font-size: 25px;
  color: rgb(0, 163, 27);
}
.private-button {
  margin-top: 10px;
  margin-left: 100px;
  height: 50px;
  width: 105px;
  font-size: 25px;
  color: rgb(245, 169, 7);
}
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin: auto;
}
body {
  margin: 0;
  padding: 0;
  border: 0;
}
.building {
  background: url("@/assets/image/upload/background.png");
  background-size: 100% 100%;
}
.left {
  position: absolute;
  top: 60px;
  left: 0;
  width: 350px;
  height: 250px;
}
.middle {
  margin: 0 300px;
  height: 250px;
}
.right {
  position: absolute;
  top: 60px;
  right: 0;
  width: 200px;
  height: 250px;
}
.introduction {
  margin-left: 50px;
  width: 300px;
  position: absolute;
  float: left;
}
</style>
